<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #app{
            background-color: #FFE18B;
            width: 100%;
           height: 360px;
           border-radius: 20px 20px 0 0;
           display: flex;
           flex-wrap: wrap;
          align-items: center;
        }
        .title{
           color: red;
           text-align: center;
        }
       .list{
        text-align: center;

       }
        .item{
            display: flex;
            height: 50px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            align-items: center;
            font-size: 12px;
        }
        .item button{
            width: 50px;
            background-color: #FFF200;
            color: red;
            border: 2px red solid;
            border-radius: 5px;
        }
        .item img{
            width: 50px;
            height: 50px;
            border-radius: 50px;
        }
    </style>
</head>

<body>
    <!-- 由于Vue的实例挂载在id为app的DOM节点上,所以Vue实例对象上的数据和方法就可以在
    挂载的DOM节点上使用 -->
    <div id="app">
        <div class="title">
            <p>任务列表</p>
            <p>每完成一个任务,即可获得10MB-1GB流量哦!</p>
        </div>
        <div class="list">
            <!-- 用data中的数据,渲染出多个任务,最终形成列表 -->
            <!-- 列表渲染,使用Vuejs的指令  v-for,也可以配合key属性一起使用 -->
            <!-- 列表渲染基本语法: v-for="(item,index) in datalist" key="index" -->
            <div class="item" v-for="(item,index) in datalist" v-bind:key="index">
                <div class="left">
                    <!-- 当属性值中需要计算或放置变量时,属性名称前必须有v-bind: -->
                    <img v-bind:src="item.pic" alt="">
                </div>
                <div class="middle">
                    <!-- {{ 表达式 或者 变量 }}插值表达式(双大括号)会解析/计算表达式的值,只能用在标签内容区 -->
                    <div class="name">{{item.name}}</div>
                    <div class="desc">{{item.desc}}</div>
                </div>
                <div class="right">
                    <button>{{item.status==1?'去完成':item.status==2?'领取':'已领取'}}</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el: '#app', //Vue挂载的节点
        data: {
            datalist: [
                { id: 1, pic:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F19%2F20210519212438_ced7e.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672211906&t=c70c161d99af4c94e93b99908ddd1ad0',name: '咪咕视频送流量', desc: '来咪咕视频,每月领500MB流量奖励', status: 1 },
                { id: 2, pic:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202103%2F09%2F20210309094501_jfyix.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672211906&t=20ec7163bd2834c211cca9b0ba998782',name: '和彩云送福利', desc: '免费领100G空间+月月2GB', status: 2 },
                { id: 3,pic:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202105%2F29%2F20210529001057_aSeLB.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672211906&t=c20e75ea1db3c7357c59d4f297e6ffc3', name: '最高40元套餐折扣券', desc: '参与抽奖,奖励10MB,经验值+10', status: 1 },
                { id: 4, pic:'https://img2.baidu.com/it/u=2859542338,3761174075&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500', name: '吃喝玩乐季,超级秒杀', desc: '进入隐藏二楼参与秒杀,奖励10MB,经验值+10', status: 3 },
            ]
        },   //定义的响应式数据,data可以是一个对象也可以是一个函数
        //data：function(){return {}}
        computed: {},//定义计算属性
        watch: {},   //定义数据监听
        methods: {}, //定义方法(函数)
        filters: {}, //定义过滤器
        directives: {},//定义自定义指令
        components: {},//注册局部组件
    })
</script>